<template>
  <div class="reply" ref="cont">
    <content-header>商品评论</content-header>
    <div class="container">
      <div class="body">
        <div class="search">
          <a-form-model ref="searchForm" layout="inline" :model="searchForm" >
            <a-form-model-item label="选择时间">
              <a-range-picker
                @change="timePickerChange"
                :show-time="{
                  hideDisabledOptions: true,
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                }"
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-model-item>
          </a-form-model>
          <a-form-model ref="searchForm" layout="inline" :model="searchForm" style="margin-top:20px">
            <a-form-model-item label="评价状态">
              <a-select allowClear style="width: 235px" @change="(val) => {if(val != undefined){searchForm.is_reply = val}else{searchForm.is_reply = ''}}">
                <a-select-option :value="1">
                  已回复
                </a-select-option>
                <a-select-option :value="0">
                  未回复
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="商品信息">
              <a-input v-model="searchForm.keyWord" style="width: 235px" placeholder="请输入商品ID或者商品信息" />
            </a-form-model-item>
            <a-form-model-item label="用户名称">
              <a-input v-model="searchForm.username" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="getData">
                <a-icon type="search" />搜索
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <div class="btn" style="margin-top:20px">
          <a-button type="primary" @click="show = true">
            <a-icon type="plus" />添加虚拟评论
          </a-button>
        </div>
        <div class="table" >
          <a-table :columns="columns" :pagination="true" rowKey="id" :loading="loading" :data-source="list" :scroll="{ x: list.length > 0&&screenWidth<=1400?1500:0, y: 0 }">
            <div slot="info" slot-scope="record" class="acea-row row-middle">
              <div class="pic"><img :src="record.product_pic" alt=""></div>
              <div class="text">{{record.product_name}}</div>
            </div>
            <div slot="content" slot-scope="record" class="acea-row row-column">
              <div class="text">{{record.eval_content}}</div>
              <div class="pic"><img :src="record.eval_pic" alt=""></div>
            </div> 
            <div slot="time" slot-scope="record">
              {{moment(record.time*1000).format("YYYY-MM-DD HH:mm:ss")}}
            </div>
            <div slot="action" class="act acea-row row-middle" slot-scope="record">
              <a href="javascript:;" class="acea-row row-middle" @click="showHf = true,hfForm.id = record.id;" v-if="record.reply == ''">回复<p></p></a>
              <a href="javascript:;" class="acea-row row-middle" v-else>已回复<p></p></a>
              <a-popconfirm title="确认删除" ok-text="确定" cancel-text="取消" @confirm="delReply(record.id)" >
                <a href="javascript:;" class="acea-row row-middle" >删除</a>
              </a-popconfirm>
            </div>
          </a-table>
        </div>
      </div>
    </div>
    <a-modal title="添加虚拟评论" :visible="show" :width="600" okText="提交" @ok="addReply" @cancel="hideModal" >
      <a-form-model :model="xuniForm" ref="xuniForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="商品" prop="product_id" required>
          <productSelect :value="xuniForm.product_id" @confirm="(id)=>{xuniForm.product_id = id;}"></productSelect>
        </a-form-model-item>
        <a-form-model-item label="用户名称" prop="username" required>
          <a-input v-model="xuniForm.username" placeholder="请输入用户名称"></a-input>
        </a-form-model-item>
        <a-form-model-item label="评价文字" prop="eval_content" required>
          <a-textarea v-model="xuniForm.eval_content" placeholder="请输入评价文字" allow-clear />
        </a-form-model-item>
        <a-form-model-item class="acea-row row-middle" label="商品分数" prop="score_product" required>
          <a-rate v-model="xuniForm.score_product" />
        </a-form-model-item>
        <a-form-model-item class="acea-row row-middle" label="商品分数" prop="score_serve" required>
          <a-rate v-model="xuniForm.score_serve" />
        </a-form-model-item>
        <a-form-model-item label="评价图片" prop="eval_pic" required>
          <picSelector :value="xuniForm.eval_pic" @confirm="(path)=>xuniForm.eval_pic = path"></picSelector>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal title="添加回复" :visible="showHf" :width="520" okText="提交" @ok="addHf" @cancel="showHf = false" >
      <a-textarea placeholder="请输入回复内容" allow-clear v-model="hfForm.reply" :autoSize="{ minRows: 4, maxRows: 4 }" />
    </a-modal>
  </div>
</template>

<script>
import contentHeader from 'components/common/content-header'
import picSelector from 'components/picSelector'
import productSelect from 'components/productSelect'
import request from 'api/request'
import moment from 'moment'

const columns = [
  { title: 'ID',width:100, dataIndex: 'id', key: 'id' },
  { title: '商品信息',width:300, key: 'info', scopedSlots: { customRender: 'info' }},
  { title: '用户名称',width:150, dataIndex: 'username', key: 'username'},
  { title: '商品评分',width:150, dataIndex: 'score_product', key: 'score_product'},
  { title: '服务评分',width:150, dataIndex: 'score_serve', key: 'score_serve'},
  { title: '评价内容',width:300, key: 'content', scopedSlots: { customRender: 'content' }},
  { title: '回复内容',width: 300,dataIndex:'reply', key: 'reply'},
  { title: '评价时间',width:300, key: 'time',scopedSlots: { customRender: 'time' }},
  { title: '操作',width:200, key: 'action',width:'200' ,scopedSlots: { customRender: 'action' },fixed:'right'},
]

const list = [{
  id:1,
  pic:"/upload/pic/4c66e50c4fbd40059176a6b344c7e7cb",
  goods_name:"小黄鸭5.6KG迷你洗衣机全自动家用波轮宝宝小型加热洗烘干一体机",
  username:'cs',
  score_product:5,
  score_serve:5,
  eval_pic:"/upload/pic/4c66e50c4fbd40059176a6b344c7e7cb",
  eval_content:"测试测试测试测试测试测试测试测试",
  reply:"SSSSSSSSSSS",
  time:"1610001040",
}]

export default {
  components:{
    contentHeader,
    picSelector,
    productSelect
  },
  data() {
    return {
      screenWidth: 0,
      labelCol: { span: 4 },
      wrapperCol: { span: 14},
      searchForm:{
        starttime:"",
        endtime:"",
        is_reply:"",
        username:'',
        keyWord:'',
        is_word:1
      },
      loading:false,
      columns,
      list,
      show:false,
      xuniForm:{
        product_id:"",
        product_pic:"",
        eval_pic:'',
        username:'',
        eval_content:'',
        score_product:0,
        score_serve:0,
      },
      showHf:false,
      hfForm:{
        id:"",
        reply:""
      }
    }
  },
  created() {
    // console.log("product-reply")
    let id = sessionStorage.getItem("replyProductId")
    this.searchForm.keyWord = id?id:""
    this.getData()
  },
  methods: {
    getData(){
      // console.log(this.searchForm)
      let keyWord = this.searchForm.keyWord
      if(keyWord != ""){
        if(Number(keyWord) == keyWord){
          this.searchForm.is_word = 0
        }else{
          this.searchForm.is_word = 1
        }
      }else{
        this.searchForm.is_word = 1
      }
      this.loading = true
      request.get("/product/reply",this.searchForm).then(e=>{
        if(e.status == 200){
          this.list = e.data
        }
        this.loading = false
      })
    },
    addReply(){
      this.$refs.xuniForm.validate((valid)=>{
        if(valid){
          request.post("/product/reply/add",this.xuniForm).then(e=>{
            if(e.status == 200){
              this.$message.success("添加成功")
              this.hideModal()
              this.getData()
            }
          })
        }
      })
    },
    addHf(){
      let hfForm = this.hfForm
      if(hfForm.reply != ""){
        request.post("/product/reply/hf",hfForm).then(e=>{
          if(e.status == 200){
            this.$message.success("回复成功")
            this.showHf = false
            this.getData()
          }
        })
      }else{
        this.$message.warning("回复内容不能为空")
      }
    },
    delReply(id){
      request.post("/product/reply/del",{id}).then(e=>{
        if(e.status == 200){
          this.$message.success("删除成功")
          this.getData()
        }
      })
    },
    hideModal(){
      this.show = false
    },
    timePickerChange(m){
      if(m.length != 0){
        this.searchForm.starttime = Math.floor(moment(m[0]).valueOf()/1000) 
        this.searchForm.endtime = Math.floor(moment(m[1]).valueOf()/1000) 
      }else{
        this.searchForm.starttime = ""
        this.searchForm.endtime = ""
      }
    },
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
  },
  destroyed(){
    console.log("destroyed")
    sessionStorage.removeItem("replyProductId")
  },
  mounted() {
    const that = this
    let cont = this.$refs.cont
    this.screenWidth = cont.clientWidth
    window.addEventListener("resize",(e)=>{
      that.screenWidth = cont.clientWidth
    })
  },
}
</script>

<style scoped>
  .reply .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .reply .container .body{
    padding: 16px;
  }
  .reply .container .body .table{
    margin-top: 20px;
  }
  .reply .container .body .action{
    margin-bottom: 20px;
  }
  .reply .container .table .act p {
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
  .reply .container .table .pic{
    width: 36px;
    height: 36px;
    margin-right: 20px;
  }
  .reply .container .table .text{
    width: 60%;
  }
</style>